<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getNewsList } from '@/api/news'

const router = useRouter()

const newsList = ref([])
const imagePaths = ref({})

// 使用Vite的import.meta.glob批量导入SVG文件
const svgModules = import.meta.glob('@/assets/*.svg')

// 获取图片路径的方法
const getImagePath = async (index) => {
  try {
    const path = `/src/assets/${index}.svg`
    if (svgModules[path]) {
      const module = await svgModules[path]()
      return module.default
    }
    return ''
  } catch (e) {
    console.error(`无法加载图片: ${index}.svg`, e)
    return ''
  }
}

onMounted(async () => {
  // 预加载所有图片
  for (let i = 0; i < 10; i++) {
    try {
      const path = `/src/assets/${i}.svg`
      if (svgModules[path]) {
        const module = await svgModules[path]()
        imagePaths.value[i] = module.default
      }
    } catch (e) {
      console.error(`无法加载图片: ${i}.svg`, e)
    }
  }
  
  getNewsList().then((res) => {
     newsList.value = res.data?.list.map((item) => ({
        id: item.id,
        newsTitle: item.newsTitle,
        classReal: item.classReal,
        abstractReal: item.abstractReal,
        newsSource: item.newsSource,
        opPerson: item.opPerson,
        siteName: item.siteName,
        coverImage: item.coverImage,
        createTime: item.createTime,
        pubTime: item.pubTime,
        isPublished: item.isPublished,
        markContent: item.markContent,
      }))
  })
})

</script>

<template>
  <div class="common-layout">
    <header class="header">
      <div class="header-left">
        <img src="../../assets/logo.png" />
        <span>战略微头条</span>
      </div>
      <div class="header-right">
        <img class="exit-icon" src="../../assets/bowout.svg" />
        <span class="exit-text" @click="router.push('/release')">退出预览</span>
      </div>
    </header>
    <div>
      <div class="phone-container">
        <!-- 手机外壳 -->
        <div class="Newsphone">
          <!-- 屏幕内容 -->
          <div class="screenContent">
            <div>
              <img src="../../assets/phone-head.png" />
            </div>

            <!-- 标题区域-->
            <div class="Newsheader">
              <h1>战略微头条</h1>
            </div>

            <div class="weekly-info">  
              <!-- 新闻内容 -->
              <div class="news-item" v-for="(news, index) in newsList">
                <div class="flex translate-y-[40%]">
                  <img :src="imagePaths[0]">
                  <img :src="imagePaths[index + 1]">
                </div>
                <h3 class="news-title relative z-10 bg-white">{{ news.newsTitle }}</h3>
                <div class="news-source">{{ news.siteName }}</div>
                <p class="news-summary">
                 {{ news.abstractReal }}
                </p>
                <a href="#" class="read-more" @click="router.push(`/previewdetail/${news.id}`)">阅读全文</a>
                <div class="flex w-full">
                  <div class="flex w-[80%]  border-cyan-500 border-b"></div>
                  <div class="flex-1 flex ml-2">
                    <img src="../../assets/skew.svg">
                    <img src="../../assets/skew.svg">
                    <img src="../../assets/skew.svg">
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.common-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.header {
  width: 100%;
  height: 60px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e6e6e6;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
}

.header > :nth-child(1) img {
  width: 100px;
  height: 40px;
  margin-right: 10px;
  vertical-align: middle;
}

.exit-icon {
  width: 20px;
  height: 20px;
}

.header:nth-child(1) span {
  font-size: 20px;
  font-weight: 700;
  margin-left: 10px;
}

.exit-text {
  font-size: 20px;
  cursor: pointer;
}

.phone-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 60px);
  background-color: #f5f5f5;
  padding: 20px;
  overflow: auto;
}

.Newsphone {
  width: 320px;
  height: 650px;
  background-color: #1a1a1a;
  border-radius: 42px;
  position: relative;
  padding: 10px;
}

.screenContent {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
}



.Newsheader {
  text-align: center;
  padding: 10px 0 15px;
  border-bottom: 1px solid #eeeeee;
  margin: 0 15px;
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
}


.Newsheader h1 {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.weekly-info {
  padding: 0 15px;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
}

.news-title {
  font-size: 16px;
  font-weight: 700;
  color: #333333;
  margin-bottom: 10px;
  line-height: 1.4;
}

.news-source {
  color: #999999;
  font-size: 13px;
  margin-bottom: 10px;
}

.news-summary {
  font-size: 14px;
  color: #666666;
  line-height: 1.5;
  margin-bottom: 15px;
}

.read-more {
  color: #1e88e5;
  font-size: 14px;
  text-decoration: none;
}

</style>
